<template>
  <header class="header">
    <div class="top">
      <div class="round"></div>
      <div class='search'>
        <van-search placeholder="大家在搜” 玩转万圣节派对 " v-model="value" />
      </div>
    </div>
    <ul class='bottom'>
      <router-link to="/shop" tag="li">
        <p>推荐</p>
      </router-link>
      <router-link to="/skin" tag="li">
        <p>护肤</p>
      </router-link>
      <router-link to="/cosmetics" tag="li">
        <p>彩妆</p>
      </router-link>
    </ul>
  </header>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.header {
  .top {
    @include background-color(#fff);
    .round {
      position: absolute;
      left: 2px;
      top: 0;
      @include rect(.44rem, .44rem);
      @include border-radius(50%);
      @include background-color(#eee);
    }
    .search {
      padding: 0 31px 0 50px;
      height: 54px;
    }
  }
  .bottom {
    @include rect(4.14rem, .36rem);
    @include flexbox();
    @include justify-content();
    @include background-color(#fff);
    margin: 0 auto;
    li {
      @include rect(.32rem, .44rem);
      @include flex();
      @include justify-content();
      p {
        @include flexbox();
        @include rect(1rem, .44rem);
        @include font-size(.16rem);
        @include justify-content();
        @include align-items();
      }
      &.router-link-active{
        @include color(#000);
        @include font-weight(600)
      }
    }
  }
}
</style>
